<template>
	<view class="content" @touchmove.stop.prevent catchtouchmove @touch.stop.prevent>
		<scroll-view @touchmove.stop.prevent @touch.stop.prevent class="scroll-view" scroll-y
			style="height: calc(100vh - 40px)" refresher-enabled="true" refresher-background="#f6f6f6"
			:refresher-threshold="50" @scrolltolower.stop="onScrollToLower" @refresherrefresh.stop="onRefresh"
			:refresher-triggered="triggered">
			<view class="inner">
				<view class="uni-margin-wrap" style="margin-bottom: 20rpx; width: 710rpx; height: 378rpx">
					<swiper class="swiper" circular indicator-color="rgba(255, 255, 255, 0.5)"
						indicator-active-color="rgba(255, 255, 255, 1)" :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" style="width: 710rpx; height: 378rpx">
						<swiper-item v-for="item in swiperList" :key="item.id">
							<image :src="item.imgUrl" style="border-radius: 16rpx;width: 710rpx;height: 376rpx;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="notice">
				<view class="left">
					<image src="/static/index/message.png" mode=""></image>
				</view>
				|
				<view class="right">
					<uni-notice-bar :show-icon="false" scrollable :text="msg" background-color="#fff" color="#333"/>
				</view>
			</view>
			<view class="echarts_content" id="echartsContent">
				<view class="title">{{ $tokenName }}走势</view>
				<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">
				</uni-ec-canvas>
				<view class="topbox"></view>
			</view>
			<view class="goodsList">
				<view class="title">兑换商品</view>
				<GoodsList ref="goodList" :farmerCommodityList="farmerCommodityList" :haMore="haMore"></GoodsList>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
	import {
		getSwiper,
		getEchartsData,
		getMsg
	} from '@/apis/first'
	import {
		parseTime3
	} from '@/utils'
	import GoodsList from './components/GoodsList'
	let chart = null
	export default {
		data() {
			return {
				title: 'Hello',
				autoplay: true,
				interval: 3000,
				duration: 500,
				swiperList: [],
				msg: '',
				tokenDateList: [],
				tokenList: [],
				tokenPriceArr: [],
				triggered: false,
				storeId: '',
				userInfo: {},
				ec: {
					lazyLoad: true
				},
			}
		},
		components: {
			GoodsList,
			uniEcCanvas,
		},
		computed: {
			indicatorDots() {
				return this.swiperList.length > 1
			},
			$tokenName(){
				return this.$config.tokenName
			}
		},
		onLoad() {
			this.getSwiper()
			this.$refs.canvas.init(this.initChart)
			this.getEchartsData()
			this.getMsg()
		},
		methods: {
			async getSwiper() {
				const res = await getSwiper()
				if (res.code === 200) {
					this.swiperList = res.data.list
					// const	imgBaseUrl = 'http://www.yukukeji.com/static'
					console.log(this.swiperList, '@@@@@@@slist');
				} else {
					console.log(res)
				}
			},
			init(option) {
				let chart = this.initChart;
				this.$refs.canvas.init(chart)
			},


			//初始化图表
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				// chart.setOption(this.getOption)
				return chart
			},
			async getEchartsData() {
				console.log("获取echarts数据");
				const res = await getEchartsData()
				if (res.code === 200) {
					this.tokenList = res.data.list
					console.log(this.tokenList, 'tokenList')
					this.tokenPriceArr = this.tokenList.map((item) => {
						return item.tokenPrice
					})
					this.tokenDateList = this.tokenList.map((item) => {
						return parseTime3(item.tokenDate)
					})
					let tokenPriceArr = []
					let tokenDate = []
					for (let i = 0; i < 7; i++) {
						tokenDate.push(this.tokenDateList[i])
						tokenPriceArr.push(this.tokenPriceArr[i])
					}
					tokenDate = tokenDate.reverse()
					tokenPriceArr = tokenPriceArr.reverse()
					// console.log(tokenPriceArr, tokenDate)
					let option = {
						title: {
							text: '单位:元',
							left: '2%', // 标题位置
							textStyle: {
								fontSize: 10, // 标题大小
								color: '#999'
							}
						},
						grid: {
							//设置图表四周留白间距
							top: '16%',
							right: '3%',
							bottom: '16%',
							left: '10%'
						},
						xAxis: {
							show: true,
							type: 'category',
							boundaryGap: true, //设置x轴两边的留白
							axisTick: {
								//x轴刻度尺
								show: false
							},
							axisLine: {
								//x轴线条颜色
								lineStyle: {
									color: '#eee',
									type: 'dashed',
									width: 1
								}
							},
							data: tokenDate,
							data: [{
									value: tokenDate[0],
									// 突出周一
									textStyle: {
										// fontSize: 20,
										color: '#999999'
									}
								},

								{
									value: tokenDate[1],
									textStyle: {
										color: '#999999'
									}
								},
								{
									value: tokenDate[2],
									textStyle: {
										color: '#999999'
									}
								},
								{
									value: tokenDate[3],
									textStyle: {
										color: '#999999'
									}
								},
								{
									value: tokenDate[4],
									textStyle: {
										color: '#999999'
									}
								},
								{
									value: tokenDate[5],
									textStyle: {
										color: '#999999'
									}
								},
								{
									value: tokenDate[6],
									textStyle: {
										color: '#999999'
									}
								}
							]
							// "splitArea": { "show": true, "areaStyle": { "color": ["#447b86"] } }
						},

						yAxis: {
							type: 'value',
							max: 0.1, //最大刻度值
							interval: 0.02, //刻度值间隔值
							splitLine: {
								//网格线
								show: true, //关闭网格线
								// 或者
								lineStyle: {
									type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线
									color: '#EEEEEE'
								}
							},
							axisLine: {
								//y轴线条颜色
								show: false,
								lineStyle: {
									color: '#999',
									width: 1
								}
							}
						},
						series: [{
							data: tokenPriceArr,
							type: 'line',
							// markPoint: {
							//   data: [{ type: 'max', name: '最大值' }],
							//   symbol: 'roundRect',
							//   symbolOffset: [0, '-70%'],
							//   symbolSize: 32,
							//   label: {
							//     show: true, //开启显示
							//     color: '#fff'
							//   }
							// },
							smooth: true,
							// color: '#7CCA66',
							color: '#3E70FF',
							// smooth: true,//面积图改成弧形状
							lineStyle: {
								width: 2, //外边线宽度
								color: '#3E70FF' //外边线颜色
							},
							showSymbol: false, //去除面积图节点圆
							areaStyle: {
								//区域填充渐变颜色
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(62,112,255,0.3)' // 0% 处的颜色
										},
										{
											offset: 1,
											color: 'rgba(62,112,255,0)' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							},
							markLine: {
								silent: true,
								lineStyle: {
									color: '#999'
								},
								data: [{
										yAxis: 0.02
									},
									{
										yAxis: 0.04
									},
									{
										yAxis: 0.06
									},
									{
										yAxis: 0.08
									},
									{
										yAxis: 0.1
									}
								]
							}
						}]
					}
					setTimeout(() => {
						console.log("@@@@@@echarts渲染");
						this.$refs.canvas.setOption(option, true);
					}, 500)
				} else {

				}
			},
			async getMsg() {
				const res = await getMsg()
				if (res.code === 200) {
					const data = res.data;
					console.log('msg:', data)
					this.msg = data?.content
				} 
			},
			async onScrollToLower() {
				// this.triggered = true
				await this.$refs.goodList.getFarmerCommodityList()
				// this.triggered = false
			},
			async onRefresh() {
				this.triggered = true
				this.$refs.goodList.hasMore = true;
				this.getSwiper()
				this.getMsg()
				this.getEchartsData()
				// 必须要在请求结束后才结束下拉的动画
				await this.$refs.goodList.getFarmerCommodityList(true)
				this.triggered = false
			}

		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f6f6f6;
		padding-top: 20rpx;
		position: relative;
		.inner {
			padding: 0 20rpx;
		}
		.bgimg {
			position: absolute;
			top: -250rpx;
			z-index: -1;
		}
	}
	.notice{
		padding: 10rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		color: #cccccc;
		.left{
			width: 74rpx;
			height: 35rpx;
			margin-right: 20rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.right{
			margin-left: 10rpx;
			flex: 1;
			font-size: 28rpx;
		}
	}
	.msg_content {
		display: flex;
		box-sizing: border-box;
		// margin: 0 20rpx;
		padding: 20rpx;
		height: 92rpx;
		background: #ffffff;
		vertical-align: middle;
		border-radius: 16rpx;
	}
	/deep/ .uni-noticebar {
		font-size: 28rpx;
		margin-bottom: 0 !important;
	}
	.goodsList {
		padding: 0 40rpx;
		border-radius: 8rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		.title {
			padding: 20rpx 0 0;
			color: #1A1A1A;
			font-weight: bold;
			font-size: 32rpx
		}
	}
	.msg {
		border-left: 1px solid #eeeeee;
		// padding-left: 20rpx;
		box-sizing: border-box;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		font-weight: 600;
		font-size: 14px;
		color: #86cc66;
		padding-left: 20rpx;
	}
	.echarts_content {
		padding: 0 40rpx;
		border-radius: 8rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		position: relative;
		.topbox{
			width: 100%;
			height: 504rpx;
			background-color: transparent;
			position: absolute;
			top: 80rpx;
			
			left: 0;
		}
		.title {
			padding: 20rpx 0;
			color: #1A1A1A;
			font-weight: bold;
			font-size: 32rpx
		}
		.uni-ec-canvas {
			width: 100%;
			height: 504rpx;
			display: block;
		}
	}
</style>